<template>
  <div class="all-notes-wrapper">
    <el-container class="container">
      <!-- <view-menu
        @homeBtnClick="homeBtnClick"
        @menuSelectHandle="menuSelectHandle"
      ></view-menu> -->
      <el-aside style="width: 150px">
        <el-menu class="menu" @select="menuSelectHandle">
          <!-- <el-menu-item
            class="menu-tab"
            index="home"
            :style="tabStyle()"
            @click="homeBtnClick"
          >
            <span slot="title">
              <router-link class="link_style" to="/home">首页</router-link>
            </span>
          </el-menu-item> -->
          <!-- 循环显示一级菜单 -->
          <div style="height: 30px"></div>
          <el-menu-item
            class="menu-tab"
            v-for="value in pageList"
            :key="value.id"
            :index="value.id"
            :style="tabStyle()"
          >
            <span slot="title">
              <!-- {{ value.name }} -->
              <router-link class="link_style" :to="showSelf(value.id)">{{
                value.name
              }}</router-link>
            </span>
          </el-menu-item>
          <el-menu-item
            v-if="type"
            class="menu-tab"
            index="backstage-manage"
            :style="tabStyle()"
          >
            <span slot="title">
              <router-link class="link_style" to="/backstage-manage"
                >后台管理</router-link
              >
            </span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="notes-main">
        <div class="notes-main-inner">
          <!-- 中间内容区域 -->
          <div class="notes-main-c">
            <ul
              class="notes-main-c-list"
              v-infinite-scroll="load"
              infinite-scroll-disabled="disabled"
            >
              <li
                v-for="(item, index) of noteList"
                :key="index"
                class="notes-main-c-list-li"
                @click="noteViewDetailClick(item.id, item.type)"
              >
                <el-card class="note-card" shadow="hover">
                  <div slot="header" class="note-card-header">
                    <div class="note-card-header-title">
                      <span>{{ item.title }}</span>
                    </div>
                    <div class="note-card-header-info">
                      <span>{{ item.create_time }}</span>
                      <span class="note-card-header-info-date">{{
                        item.date
                      }}</span>
                    </div>
                  </div>
                  <div class="note-card-content" v-html="item.content"></div>
                  <div class="pinglun" @click.stop>
                    <img
                      src="../assets/img/dianzan.png"
                      alt=""
                      class="imgZan"
                      @click="zan(item, index)"
                    />
                    <span class="zan">{{ item.star_count }}</span>
                    <img src="../assets/img/pinglun.png" alt="" />
                    <span class="ping">{{ item.comment_count }}</span>
                  </div>
                </el-card>
              </li>
            </ul>
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="current"
              :page-size="10"
              layout="total, prev, pager, next"
              :total="total"
            >
            </el-pagination>
            <p v-if="loading" class="data-loading">加载中...</p>
            <p v-if="noMore"></p>
          </div>
          <!-- 右侧内容区域 -->
          <div class="notes-main-r">
            <div class="user_card notes-main-r-item">
              <div class="user_card-img">
                <div class="headpic">
                  <el-avatar
                    :size="70"
                    v-if="userImgShow"
                    :src="userimg"
                  ></el-avatar>

                  <el-avatar
                    :size="70"
                    v-else
                    src="../assets/img/user_img.jpg"
                  ></el-avatar>

                  <!-- <img
                    :src="
                      'http://127.0.0.1:8000/avatar/' +
                        window.sessionStorage.getItem('userImg')
                    "
                    alt=""
                  /> -->
                </div>
              </div>
              <div class="user_card-innerwrap">
                <div class="name_box">
                  <div class="name_box-item" :title="nickname">
                    {{ nickname }}
                  </div>
                </div>
                <ul class="user_info">
                  <li>欢迎来到博客平台</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// import viewMenu from '@/components/modules/menu'

export default {
  name: "all-notes",
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      current: 1,
      loading: true,
      zanShow: false,
      pageList: [],
      noteList: [],
      noMore: false,
      currentPage: 1,
      queryZan: {
        article_id: "",
        user_id: "",
      },
      allList: {
        page: 1,
        limit: 10,
      },
      total: 1,
      userimg: "",
      houtai: false,
      type: false,
    };
  },
  computed: {
    // disabled() {
    //   return this.loading || this.noMore
    // },
    // noteListLen() {
    //   return this.noteList.length;
    // },
    sectionId() {
      return this.$route.params.id;
    },
    nickname() {
      return window.sessionStorage.getItem("userName") || "" !== ""
        ? window.sessionStorage.getItem("userName")
        : "您还没有登录哦";
    },
    userImgShow() {
      return window.sessionStorage.getItem("userName") || "" !== ""
        ? true
        : false;
    },
    // houtai() {
    //   return this. !== 1 ? true : false
    // }
  },
  created() {},
  mounted() {
    this.gettype();
    this.userimg =
      "http://127.0.0.1:8000/avatar/" +
      JSON.parse(window.sessionStorage.getItem("userInfo")).avatar +
      "/";

    const mb = window.sessionStorage.getItem("userType");
    this.type = parseInt(mb) === 1;
  },
  methods: {
    // 点击页码
    async handleCurrentChange() {
      this.noteList = [];
      console.log(this.current);
      this.allList.page = this.current;
      const { data: list } = await this.$axios.get("/article/list/all/", {
        params: this.allList,
      });
      this.noteList = list.data;
    },
    // 跳转样式
    tabStyle() {
      return {
        paddingLeft: "20px",
      };
    },
    // 点击菜单
    async menuSelectHandle(val) {
      console.log(val);
      const res = this.pageList.find((item) => {
        return item.id === val;
      });
      console.log(res);
      this.noteList = [];
      const { data: list } = await this.$axios
        .get("/article/list/" + res.name, { params: this.allList })
        .catch((res) => {
          this.$message.error(res.response.data.message);
        });
      this.loading = false;
      this.noMore = true;
      this.noteList = list.data;
      this.total = list.total;
    },
    // 更改右侧home参数
    showSelf(id) {
      return `/home/${id}`;
    },
    async gettype() {
      const { data: res } = await this.$axios.get("/article/types/");
      const mb = res.map((item) => {
        return {
          id: item.id.toString(),
          name: item.name,
          create_time: item.create_time,
          update_time: item.update_time,
        };
      });
      mb.push({
        id: -1,
        name: "all",
      });
      this.pageList = [];
      this.pageList = mb;
      this.noteList = [];
      const { data: list } = await this.$axios.get("/article/list/all/", {
        params: this.allList,
      });
      this.loading = false;
      this.noMore = true;
      this.noteList = list.data;
      console.log(list.data);
      this.total = list.total;
      console.log(this.noteList);
    },
    zan(v, i) {
      console.log(v);
      this.queryZan.user_id = window.sessionStorage.getItem("userID");
      this.queryZan.article_id = v.id;
      // this.zanShow = true;
      this.$axios
        .post("/article/star/", this.queryZan)
        .then((data) => {
          console.log(data);
          this.$message.success("点赞成功");
          var now_node = document.getElementsByClassName("zan")[i];
          var num = parseInt(now_node.innerHTML);
          now_node.innerHTML = num + 1;
          parent = now_node.parentNode;
          parent
            .getElementsByClassName("imgZan")[0]
            .setAttribute("SRC", "http://127.0.0.1:8000/avatar/zan.png");
        })
        .catch((error) => {
          this.$message.error(error.response.data.message);
        });
    },
    load() {
      this.loading = true;
      this.getNoteList();
    },
    getNoteList() {
      const param = {
        page: this.currentPage,
        // start: this.noteListLen === 0 ? 0 : this.noteListLen + 1,
        len: 10,
        section_type: this.sectionId,
      };
      this.currentPage += 1;
      // this.$http("get", "noteList", param)
      //   .then((data) => {
      //     this.loading = false;
      //     if (data === "fail") this.noMore = true;
      //     else this.noteList.push(...data);
      //     console.log(this.noteList);
      //   })
      //   .catch((error) => {
      //     this.loading = false;
      //   });
    },
    noteViewDetailClick(note_id, note_type) {
      localStorage.setItem("noteType", note_type);
      this.$router.push({ path: `/note/${note_id}` });
    },
    reLoadList() {
      // this.noteList.splice(0);
      // this.currentPage = 1;
    },
    homeBtnClick() {
      this.$emit("homeBtnClick");
    },
    // menuSelectHandle(val) {
    //   if (val === 'backstage-manage') return
    //   this.reLoadList()
    //   this.getNoteList()
    // }
  },
  components: {
    // viewMenu
  },
  watch: {
    isEdit() {
      this.reLoadList();
    },
  },
};
</script>
<style lang="scss" scoped>
.all-notes-wrapper {
  height: 100%;
  .container {
    height: 100%;
  }
  .notes-main {
    padding: 0;
    padding-top: 10px;
    padding-left: 10px;
    .notes-main-inner {
      display: flex;
      .notes-main-c {
        flex: 4;
        margin-right: 10px;
        .data-loading {
          height: 30px;
          line-height: 30px;
          background: #fff;
          text-align: center;
          color: #666;
        }
        ul {
          padding: 0;
          margin: 0;
          list-style: none;
        }
        .notes-main-c-list-li {
          margin-bottom: 10px;
        }
        .note-card-header-info {
          font-size: 12px;
          color: #808080;
          .note-card-header-info-date {
            margin-left: 15px;
          }
        }
        .note-card-content {
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          text-indent: 2em;
        }
        .pinglun {
          border-top: #808080;
          margin-top: 20px;
          height: 30px;
          width: 100%;
          // border: 1px solid red;
          img {
            width: 20px;
            height: 20px;
            vertical-align: bottom;
            margin: 0 5px;
          }
          span {
            font-size: 14px;
            color: #808080;
            margin-right: 10px;
          }
        }
      }
      .notes-main-r {
        flex: 1.5;
        .notes-main-r-item {
          margin-bottom: 10px;
          border-radius: 4px;
          background: #fff;
        }
        .user_card {
          height: 168px;
          .user_card-img {
            position: relative;
            height: 75px;
            background-image: url("../assets/img/login_bg.png");
            background-repeat: no-repeat;
            background-size: cover;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            .headpic {
              // width: 80px;
              // height: 80px;
              position: absolute;
              bottom: -20px;
              left: 35%;
              padding: 3px;
            }
          }
          .user_card-innerwrap {
            padding: 16px 10px 9px;
            .name_box {
              height: 16px;
              line-height: 16px;
              padding-top: 5px;
              text-align: center;
              .name_box-item {
                display: inline-block;
                max-width: 114px;
                font-size: 14px;
                font-weight: bold;
                text-overflow: ellipsis;
                overflow: hidden;
                vertical-align: middle;
              }
            }
            .user_info {
              margin-top: 10px;
              li {
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
// 菜单样式
.sidebar {
  position: relative;
  // height: 100%;
  background-color: rgba(9, 34, 45, 0.4);
  box-shadow: 3px 10px 10px rgba(0, 0, 0, 0.3);
  overflow: unset;
  // transition: all 0.1s;
  z-index: 10;
  .sidebar-logo {
    text-align: center;
    height: 30px;
    img {
      height: 30px;
      border-radius: 50%;
    }
  }
  .link_style {
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
  }
}

.close {
  position: absolute;
  left: 100%;
  top: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  color: #38baf3;
  background: rgba(9, 34, 45, 0.4);
  border: none;
  border-radius: 0 5px 5px 0;
  padding: 0;
}

.close >>> i {
  display: block;
  height: 100%;
  line-height: inherit;
}

.close:hover,
.close:focus {
  background: rgba(9, 34, 45, 0.4);
  color: #38baf3;
}

img {
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

.menu {
  width: 100%;
  text-align: left;
  font-size: 20px;
  background-color: rgba(9, 34, 45, 0);
  border: none;
}

.menu /deep/ .el-submenu__title {
  height: 37px;
  line-height: 37px;
  color: white;
}

.menu /deep/ .el-submenu__title i {
  color: #38baf3;
}

.menu /deep/ .el-submenu__title:hover {
  background: rgba(5, 31, 58, 0.2);
  border-left: 3px solid #38baf3;
}

.menu-expand /deep/ .el-menu {
  background-color: rgba(255, 0, 0, 0);
}

.menu-expand /deep/ .el-menu-item-group__title {
  padding: 0;
}

.menu /deep/ .menu-tab {
  height: 37px;
  line-height: 37px;
  padding-left: 35px;
  color: #e2e3e5;
}

.menu-tab:hover,
.is-active[tabindex="-1"] {
  color: #38baf3;
  border-left: 3px solid #38baf3;
  background: rgba(5, 31, 58, 0.2);
}

.menu-tab:focus {
  background: rgba(5, 31, 58, 0.2);
}

.el-menu-item * {
  display: block;
}
</style>
<style lang="scss">
.el-card.is-hover-shadow:hover,
.el-card.is-hover-shadow:focus {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
}
</style>
